<template>
  <div class="body">
    <NavbarTurn @func="getMsgFormSon" @func1="getMsgFormSon1" @func2="getMsgFormSon2"></NavbarTurn>
    <div class="content" :style="{marginTop: (msgFormSon+msgFormSon1+5)+ 'px'}">
      <text class="font">账号设置</text>
    </div>
    <div class="content2">
      <text class="font2">账号</text>
      <!--<text class="font3">{{phone}}</text>-->
      <text class="font3">{{name}}</text>
    </div>
    <div class="content3">
      <text class="font">其他设置</text>
    </div>
    <div class="content4" @click="goAllAddress">
      <text class="font5">常用地址</text>
      <div style="display: flex;flex-direction: column">
        <text class="font6">{{address}}</text>
        <!--<div style="display: flex;flex-direction: row">-->
          <!--<text class="font6">{{name}}</text>-->
          <!--<text class="font8">{{phone}}</text>-->
        <!--</div>-->
      </div>
      <image class="settingTurn2" :src="settingTurn"></image>
    </div>
    <button class="btn" @click="goOutLogin">
      <text class="font7">退出登录</text>
    </button>
  </div>
</template>

<script>
  import NavbarTurn from "../../components/narbarTurn";
  export default {
      components: {
        NavbarTurn,
      },
      onShow(){
        var that = this;
        wx.getStorage({
          key: 'userInfo',
          success (res) {
            that.name = res.data.nickName;
          }
        })
        this.$request.post({
          url: '/api/memberAddress/query',
          data: {
            'isDefault':1,
          }
        }).then(res => {
          // this.name = res[0].memberName;
          // this.phone = res[0].memberPhone;
          this.address = res[0].maProvince + res[0].maCity + res[0].maArea + res[0].maDetail + " " + res[0].memberName + " " + res[0].memberPhone;
        })
      },
      data() {
        return {
          name:"",
          phone:"",
          settingTurn:'/static/images/settingTurn.png',
          address:"",
          msgFormSon: '',
          msgFormSon1: '',
        }
      },
      methods: {
        getMsgFormSon(data) {
          this.msgFormSon = data;
        },
        getMsgFormSon1(data) {
          this.msgFormSon1 = data;
        },
        goAllAddress(){
          wx.navigateTo({
            url:'/pages/allAddress/main'
          });
        },
        goOutLogin(){
          wx.clearStorage();
        }
      },
    }
</script>

<style scoped>

  .body{
    background:rgba(247,247,247,1);
    width: 100%;
    height: 100%;
  }
  .content{
    width:375px;
    height:45px;
    background-color:rgba(255,255,255,1);
    margin-top: 63px;
    display: flex;
    flex-direction: row;
  }
  .font{
    width:60px;
    height:21px;
    font-size:15px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(0,0,0,1);
    line-height:21px;
    margin-left: 20px;
    margin-top:12px;
  }
  .content2{
    width:375px;
    height:45px;
    background:rgba(255,255,255,1);
    display: flex;
    flex-direction: row;
    margin-top: 1px;
  }
  .font2{
    width:36px;
    height:17px;
    font-size:12px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(102,102,102,1);
    line-height:17px;
    margin-left: 20px;
    margin-top: 14px;
  }
  .font3{
    width:72px;
    height:17px;
    font-size:12px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(0,0,0,1);
    line-height:17px;
    margin-left: 223px;
    margin-top: 14px;
  }
  .settingTurn{
    width: 7px;
    height: 10px;
    margin-left:7px;
    margin-top:18px;
  }
  .font4{
    height:17px;
    font-size:12px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(0,0,0,1);
    line-height:17px;
    margin-left: 249px;
    margin-top: 14px;
  }
  .content3{
    width:375px;
    height:45px;
    background-color:rgba(255,255,255,1);
    margin-top: 8px;
    display: flex;
    flex-direction: row;
  }
  .content4{
    margin-top: 1px;
    width:375px;
    height:62px;
    background:rgba(255,255,255,1);
    display: flex;
    flex-direction: row;
  }
  .font5{
    width:48px;
    height:17px;
    font-size:12px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(102,102,102,1);
    line-height:17px;
    margin-top:23px;
    margin-left: 20px;
  }
  .font6{
    width:238px;
    height:34px;
    overflow: hidden;
    display:-webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    font-size:12px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(0,0,0,1);
    line-height:17px;
    margin-top: 15px;
    margin-left: 45px;
  }
  .settingTurn2{
    width: 7px;
    height: 10px;
    margin-left:7px;
    margin-top:26px;
  }
  .btn{
    display: flex;
    flex-direction: row;
    width:325px;
    height:36px;
    background:rgba(144,42,38,1);
    border-radius:4px;
    position:fixed;
    bottom:25px;
    left:25px;
  }
  .font7{
    height:20px;
    font-size:14px;
    font-family:PingFangSC-Medium,PingFang SC;
    font-weight:500;
    color:rgba(255,255,255,1);
    line-height:20px;
    margin-top:8px ;
    margin-left: 130px;
  }

</style>
